{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Cache-Control" content="max-age=7200" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="{% block keyword %}{% endblock %}mrdoc"/>
    <meta name="description" content="{% block description %}{% endblock %}" />
    <title>{% block title %}{% endblock %} - MrDoc</title>
    <link href="{% static 'layui/css/layui.css' %}?version={{mrdoc_version}}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'editor.md/css/editormd.css' %}?version={{mrdoc_version}}" />
    <!--<link rel="stylesheet" href="{% static 'prism/prism.css' %}" />-->
    <link rel="stylesheet" href="{% static 'katex/katex.min.css' %}?version={{mrdoc_version}}" />
    <link rel="stylesheet" href="{% static 'share.js/css/share.min.css' %}?version={{mrdoc_version}}" />
    <link rel="icon" href="{% static 'favicon_16.png' %}"/>
    <link href="{% static 'mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
    <style>
        /*一级无序li显示实心圆点*/
        .doc-content ul li{
            list-style:disc;
        }
        /*二级无序li显示空心圆点*/
        .doc-content ul > li > ul > li{
            list-style-type: circle;
        }
        /*有序li显示数字*/
        .doc-content ol li{
            list-style-type: decimal;
        }
        .doc-content ol ol ul,.doc-content ol ul ul,.doc-content ul ol ul,.doc-content ul ul ul {
            list-style-type: square;
        }
        /* 三级及以下无序li显示小方块 */
        .doc-content ul ul ul li{
            list-style-type: square;
        }
        /* 下拉目录隐藏li样式 */
        .editormd-toc-menu ul.markdown-toc-list li{
            list-style:none;
        }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<div class="doc layui-fluid" style="padding-left:0px;">
    <!-- 左侧目录栏 -->
    <div class="doc-summary">
        <!-- 文档搜索 -->
        <form action="{% url 'pro_index' pro_id=project.id %}" method="get">
            <div id="doc-search-input">
                <input type="text" name="kw" placeholder="输入并回车搜索" value="" class="layui-input doc-search-input">
            </div>
        </form>
        <!-- 文集名称 -->
        <div class="project-title">
            <a href="{% url 'pro_index' pro_id=project.id %}">{{ project.name }}
                {% if project.role == 1 %}
                    <i class="layui-icon layui-icon-password"></i>
                {% endif %}
            </a>
        </div>
        <hr>
        <!-- 遍历文集大纲 -->
        {% load doc_filter %}
        <nav>
            <ul class="summary">
            <!-- 一级目录 -->
            {% for docs in project_docs %}
                <li>
                    {% if docs.id|get_next_doc %}
                        <div style="display:flex;justify-content:space-between;">
                            <a href="{% url 'doc' pro_id=docs.top_doc doc_id=docs.id %}" title="{{docs.name}}">{{ docs.name }}</a>
                            <i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
                        </div>
                        <ul class="sub-menu toc-close">
                        <!-- 二级目录 -->
                        {% for node in docs.id|get_next_doc %}
                            <li>
                                {% if node.id|get_next_doc %}
                                    <div style="display:flex;justify-content:space-between;">
                                        <a href="{% url 'doc' pro_id=node.top_doc doc_id=node.id %}" title="{{node.name}}">{{ node.name }}</a>
                                        <i class="fa fa-chevron-left switch-toc" style="padding:15px;"></i>
                                    </div>
                                    <ul class="sub-menu toc-close">
                                    <!-- 三级目录 -->
                                    {% for doc in node.id|get_next_doc %}
                                        <li><a href="{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}" title="{{doc.name}}">{{ doc.name }}</a></li>
                                    {% endfor %}
                                    </ul>
                                {% else %}
                                    <a href="{% url 'doc' pro_id=node.top_doc doc_id=node.id %}" title="{{node.name}}">{{ node.name }}</a>
                                {% endif %}
                            </li>
                        {% endfor %}
                        </ul>
                    {% else %}
                        <a href="{% url 'doc' pro_id=docs.top_doc doc_id=docs.id %}" title="{{docs.name}}">{{ docs.name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
            </ul>
        </nav>
        <div class="bq">
            <a href="https://gitee.com/zmister/MrDoc" target="_blank" class="mrdoc-link">本文档使用MrDoc发布</a>
        </div>
    </div>
    <!-- 左侧目录栏结束 -->

    <!-- 右侧文档栏 -->
    <div class="doc-body">
        <!-- 文档导航 -->
        <div class="doc-header" role="navigation">

            <a class="btn pull-left js-toolbar-action" aria-label="" href="javascript:void(0);" title="切换侧边栏">
                <i class="fa fa-align-justify"></i>
            </a>

            <a class="btn pull-left font-small"  href="javascript:void(0);" title="缩小字体">
                <i class="fa fa-font">-</i>
            </a>
            <a class="btn pull-left font-large"  href="javascript:void(0);" title="放大字体">
                <i class="fa fa-font">+</i>
            </a>
            <a class="btn pull-left font-switch" href="javascript:void(0);" title="切换字体类型">
                <i class="fa fa-text-height"></i>
            </a>
            <!-- 顶部工具栏 -->
            {% block head_toolbar %}
            {% endblock %}

            <a class="btn pull-right" aria-label="" href="{% url 'pro_list' %}">
                <i class="fa fa-home"></i> <span class="layui-hide-xs">首页</span>
            </a>
        </div>
        <!-- 文档主体 -->
        <div class="doc-body-content">
            <div class="doc-body-content-div">
                <!-- 文档内容 -->
                <div class="doc-content">
                    <!-- 标题 -->
                    <div class="doc-info">
                        <!-- 页面主体头信息 -->
                        {% block content_head %}
                        {% endblock %}

                        <!-- 广告代码开始 -->
                        {% if debug %}
                        {% else %}
                            {% if ad_code %}
                                <div class="ad-code">
                                {{ ad_code | safe }}
                                </div>
                            {% endif %}
                        {% endif %}
                        <!-- 广告代码结束 -->
                    </div>
                    <!-- 标题结束 -->
                    <!-- 正文开始 -->
                    <div class="markdown-body" id="content">
                        {% block page_content %}
                        {% endblock %}
                    </div>
                    <!-- 正文结束 -->
                </div>
                <!-- 文档目录 -->
                <div class="doc-cata">
                    <div id="toc-container"></div>
                </div>
                {% block doc_previous_next %}{% endblock %}
                <!-- 社交分享 -->
                <div class="share-div" style="margin-top: 10px;padding:10px;text-align: center;background-color: #fafafa">
                    分享到：<span class="social-share"></span>
                </div>
            </div>

        </div>
    </div>
    <!-- 右侧文档栏结束 -->
    <div class="toTop"><i class="layui-icon layui-icon-top" style="font-size: 50px;"></i></div>
</div>

<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
<!--<script src="{% static 'prism/prism.js' %}"></script>-->
<script src="{% static 'editor.md/lib/marked.min.js' %}"></script>
<script src="{% static 'editor.md/lib/prettify.min.js' %}"></script>
<script src="{% static 'editor.md/lib/raphael.min.js' %}"></script>
<script src="{% static 'editor.md/lib/underscore.min.js' %}"></script>
<script src="{% static 'editor.md/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'editor.md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'editor.md/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'editor.md/editormd.min.js' %}"></script>
<script src="{% static 'share.js/js/social-share.min.js' %}"></script>
<script>
    //加载页面时执行一次
    changeSidebar();
    //监听浏览器宽度的改变
    window.onresize = function(){
        changeSidebar();
    };
    function changeSidebar(){
        // 获取匹配指定的媒体查询
        let screen_width = window.matchMedia('(max-width: 768px)');
        //判断匹配状态
        if(screen_width.matches){
            //如果匹配到，切换侧边栏
            //console.log('小屏幕')
            $("body").addClass("big-page");
        }else{
            $("body").removeClass("big-page");
        }
    }
    </script>
{% block custom_script %}
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        //解析Markdown为HTML
        editormd.markdownToHTML("content", {
            htmlDecode      : "style,script,iframe",
            emoji           : true,  //emoji表情
            taskList        : true,  // 任务列表
            tex             : true,  // 科学公式
            flowChart       : true,  // 流程图
            sequenceDiagram : true,  // 时序图
            tocm            : true, //目录
            atLink    : false,//禁用@链接
            //tocContainer    : "#toc-container"
        });
        //为当前页面的目录链接添加蓝色样式
        $("nav li a").each(function (i) {
            var $me = $(this);
            var lochref = $.trim(window.location.href);
            var mehref = $.trim($me.get(0).href);
            if (lochref.indexOf(mehref) != -1) {
                //console.log($me,lochref,mehref)
                $me.closest("li").addClass("active");
                //展开当前文档的上级目录
                $me.parent("li").parent('ul.sub-menu').toggleClass("toc-close toc-open"); //展开二级目录
                $me.parent("div").parent('li').parent('ul.sub-menu').toggleClass("toc-close toc-open"); //展开还有子级的二级目录
                $me.parent("li").parent('ul').parent('li').parent('ul.sub-menu').toggleClass("toc-close toc-open"); //展开三级目录
                $me.parents("ul.sub-menu").prevAll("div").children("i").toggleClass("fa-chevron-left fa-chevron-down");//切换图标
            } else {
                //console.log(lochref,mehref)
                $me.closest("li").removeClass("active");
            }
        });
    </script>
    <!-- 页面初始化字体设置 -->
    <script>
        font_stauts = window.localStorage.getItem('font-sans')
        //font_size = window.localStorage.getItem('font-size')
        if(font_stauts == 'serif'){
            $(".doc-content").toggleClass("switch-font")
            $("#content").toggleClass("switch-font")
        }
        if(window.localStorage.getItem('font-size')){
            font_size = window.localStorage.getItem('font-size')
            console.log(font_size)
            //$('.doc-info h1').css({'font-size':font_size+'rem'})
            $('#content').css({'font-size':font_size+'rem'})
        }else{
            window.localStorage.setItem('font-size',0.8)
        }
    </script>
    <!-- 返回顶部 -->
    <script type="text/javascript">
        $(document).ready(function() {
            // 初始时，“返回顶部”标签隐藏
            $(".toTop").hide();
            $(window).scroll(function() {
                // 若滚动的高度，超出指定的高度后，“返回顶部”的标签出现。
                if($(document).scrollTop() >= 150) {
                    $(".toTop").show();
                } else {
                    $(".toTop").hide();
                }
            })
            // 绑定点击事件，实现返回顶部的效果
            $(".toTop").click(function() {
                $(document).scrollTop(0);
            });
        });
    </script>
    <!-- 切换隐藏侧边栏 -->
    <script>
        // 切换侧边栏
        $(function(){
            $(".js-toolbar-action").click(toggleSidebar);
        });
        //切换侧边栏显示隐藏
        function toggleSidebar(){
            console.log("切换侧边栏")
            $("body").toggleClass("big-page");
            return false;
        }
    </script>
    <!-- 切换内容字体 -->
    <script>
        //切换文档内容字体类型
        $(function(){
           $('.font-switch').click(switchFont);
        });
        function switchFont(){
            if(font_stauts == 'serif'){
                $(".doc-content").toggleClass("switch-font")
                $("#content").toggleClass("switch-font")
                window.localStorage.setItem('font-sans','sans')
            }else{
                $(".doc-content").toggleClass("switch-font")
                $("#content").toggleClass("switch-font")
                window.localStorage.setItem('font-sans','serif')
            }
        };
        //放大字体
        $(function(){
           $('.font-large').click(largeFont);
        });
        function largeFont(){
            var font_size = window.localStorage.getItem('font-size')
            console.log(font_size)
            if(parseFloat(font_size) < 1.4){
                size = parseFloat(font_size) + 0.1
                //$('.doc-info h1').css({'font-size':size+'rem'})
                $('#content').css({'font-size':size+'rem'})
                window.localStorage.setItem('font-size',size)
            }else{
                console.log("xxx")
            }
        };
        //缩小字体
        $(function(){
           $('.font-small').click(smallFont);
        });
        function smallFont(){
            var font_size = window.localStorage.getItem('font-size')
            //console.log(font_size)
            if(parseFloat(font_size) >= 0.6){
                size = parseFloat(font_size) - 0.2
                //$('.doc-info h1').css({'font-size':size+'rem'})
                $('#content').css({'font-size':size+'rem'})
                window.localStorage.setItem('font-size',size)
            }else{
                console.log("xxx")
            }
        };
    </script>
    <!-- 展开收起左边目录 -->
    <script>
        $(function(){
            $(".switch-toc").click(SwitchToc);
        });
        function SwitchToc(i){
            var $me = $(this);
            $(this).parent().next("ul").toggleClass("toc-close"); //切换展开收起样式
            $(this).toggleClass("fa-chevron-left fa-chevron-down");//切换图标
        };
    </script>

    <!-- 统计代码开始 -->
        {% if debug %}
        {% else %}
            {{ static_code | safe }}
        {% endif %}
    <!-- 统计代码结束 -->
{% endblock %}
</body>
</html>